<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>计科2412 04 洪语梵</title>
</head>
<body>
    <header>
        <h4>前端开发工程师 | 教师</h4>
        <nav>
            <ul>
                <li><a href="#about">关于我</a></li>
                <li><a href="#skills">技能</a></li>
                <li><a href="#education">教育背景</a></li>
                <li><a href="#contact">联系我</a></li>
            </ul>
        </nav>
    </header>
    <section id="about">
        <h2>关于我</h2>
        <img src="1-17.jpg" alt="图片">
        <h3>个人简介</h3>
        <p>我是一名热爱前端开发的教师，拥有4年的网页开发经验。我专注于创建用户友好且响应式的网页设计。</p>
        <h3>联系方式</h3>
        <p>邮箱: <a href="mailto:sanri@example.com">sanri@example.com</a></p>
        <p>电话: <a href="tel:+8613800008000">+86 138 0000 8000</a></p>
        <p>地址: 天津市河西区</p>
    </section>
    <section id="skills">
        <h2>技能展示</h2>
        <h4>我的技能水平</h4>
        <table border="1">
             <tr>
            <<th>技能</</th>
            <<th>熟练程度</</th>
            <<th>使用时间</</th>
        </tr>
        <tr>
            <td>HTML</td>
            <td><progress value="100" max="100" style="width:120px;"></progress></td>
            <td>3年</td>
        </tr>
        <tr>
            <td>CSS</td>
            <td><progress value="100" max="100" style="width:120px;"></progress></td>
            <td>3年</td>
        </tr>
        <tr>
            <td>JavaScript</td>
            <td><progress value="80" max="100" style="width:120px;"></progress></td>
            <td>2年</td>
        </tr>
        <tr>
            <td>响应式设计</td>
            <td><progress value="80" max="100" style="width:120px;"></progress></td>
            <td>2年</td>
        </tr>
        </table>
    </section>
    <section id="education">
        <h2>教育背景</h2>
        <table border="1">
            <tr>
                <th>时间</th>
                <th>学校</th>
                <th>专业</th>
                <th>学历</th>
            </tr>
            <tr>
                <td>2000-2007</td>
                <td>某某大学</td>
                <td>计算机科学与技术</td>
                <td>本科</td>
            </tr>
            <tr>
                <td>1997-1999</td>
                <td>某某高级中学</td>
                <td>理科</td>
                <td>高中</td>
            </tr>
        </table>
        <h3>我的介绍视频</h3>
        <video controls width="400">
            <source src="1-17.mp4" type="video/mp4">
        </video>
        <h3>我的工作环境音乐</h3>
        <audio controls>
            <source src="1-17.mp3" type="audio/mp3">
        </audio>
    </section>
    <section id="contact">
        <h2>联系我</h2>
        <form>
            <fieldset>
                <legend>个人信息</legend>
                <label for="name">姓名:</label>
                <input type="text" id="name" name="name"><br><br>
                
                <label for="email">邮箱:</label>
                <input type="email" id="email" name="email"><br><br>
                
                <label for="phone">电话:</label>
                <input type="tel" id="phone" name="phone"><br><br>
            </fieldset>
            <fieldset>
                <legend>留言板</legend>
                <label for="msg-time">留言时间:</label>
                <input type="date" id="msg-time" name="msg-time"><br><br>
                <label for="message">留言:</label><br>
                <textarea id="message" name="message" rows="4" cols="30"></textarea><br><br>
                
                <input type="submit" value="提交">
            </fieldset>
        </form>
    </section>
    <footer>
        <p>© 2025 赵晶的个人主页.保留所有权利.</p>
        <p>关注我: <a href="#">Gitee</a>:</p>
    </footer>
</body>
</html>
